<template>
  <div class="aa">
    <div class="head">
      <span style="margin-right:20px;">申请时间</span>
      <el-date-picker
        v-model="value1"
        type="datetime"
        placeholder="时间:从"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd"
      />
      <el-button style="margin-left:20px;" type="primary" @click="onSubmit">查询</el-button>
    </div>
    <div>
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="cardConfig.todayApplyDetailList || [{}]"
        height="700"
        border
        highlight-current-row
        :default-sort="{order: 'ascending'}"
      >
        <el-table-column type="index" label="序号" align="center" min-width="10"></el-table-column>
        <el-table-column label="订单类型" align="center" min-width="40">
          <template slot-scope="{row}">
            <span>{{row.apply_type}}</span>
          </template>
        </el-table-column>
        <el-table-column label="小组" align="center" min-width="100">
          <template slot-scope="{row}">
            <span>{{row.group_name}}</span>
          </template>
        </el-table-column>

        <el-table-column label="申请数量" min-width="50" align="center">
          <template slot-scope="{row}">
            <span>{{ row.amount}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注信息" min-width="50" class-name="warn_time" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" min-width="50" class-name="end_times" align="center">
          <template slot-scope="{row}">
            <span>{{ row.add_time}}</span>
          </template>
        </el-table-column>
        <el-table-column label="分配IP" min-width="50" class-name="end_times" align="center">
          <!-- <template slot-scope="{row}">
            <span>{{ row.bind_ip}}</span>
          </template>-->
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
//引入vuex
import { mapState } from "vuex"
//引入IP
import { todayApplyDetail_card } from "@/api/table"

export default {
  data() {
    return {
      value1: "",
      listLoading: false,
      tableKey: 0,
    }
  },
  created() {
    this.todayApplyDetail_card()
  },
  methods: {
    onSubmit() {
      // console.log(this.value1)
    this.todayApplyDetail_card()
    },
    todayApplyDetail_card() {
      todayApplyDetail_card({
        start_time:this.value1,
        pid: localStorage.getItem("id") || this.$store.state.cardConfig.sort_id,
      }).then((res) => {
        // console.log(res.data)
        this.$store.commit("todayApplyDetailList_card", res.data)
      })
    },
  },
  components: {},
  computed: {
    ...mapState(["cardConfig"]),
  },
}
</script>

<style scoped lang='less'>
.aa {
  padding: 10px;
  .head {
    margin-bottom: 10px;
  }
}
</style>
